<template>
  <div>
    <!-- 头部导航 -->
    <div>
      <van-nav-bar fixed>
        <template #left>
          <img src="@/assets/logo.png" class="logo" />
        </template>
        <template #right>
          <!-- 坑：postcss只能翻译(px自动转换rem)style里的css样式代码，标签内的行内样式它无法把px转换成rem，需要自己手动计算出rem的值 -->
          <van-icon name="search" size="0.48rem" color="#fff" @click="moveSearchFn" />
        </template>
      </van-nav-bar>
    </div>
    <!-- Tab导航栏 -->
    <div class="main">
      <van-tabs v-model="channelId" sticky offset-top="1.22667rem" animated @change="channelChangeFn">
        <van-tab v-for="obj in userChannelList" :key="obj.id" :title="obj.name" :name="obj.id">
          <ArticleList :list="channelId"></ArticleList>
        </van-tab>
      </van-tabs>
      <!-- 编辑频道图标 -->
      <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="popupClickFn" />
    </div>
    <!-- 频道列表弹出层 挂载到body上 -->
    <van-popup v-model="show" get-container="body" class="channenl-popup">
      <chanenlEdit :userChannelList="userChannelList" :uncheckChannelList="uncheckChannelList" @addChannelEV="addChannelFn" @deleteChannelEV="deleteChannelFn" @colseEV="colseFn" ref="editRef" v-model="channelId"></chanenlEdit>
    </van-popup>
  </div>
</template>

<script>
import { getUserChannelsListApi, getAllChannelListApi, updateChannelsApi, deleteUserChannelApi } from '@/api'
import ArticleList from './components/ArticleList.vue'
import chanenlEdit from './channenlEdit.vue'
export default {
  data() {
    return {
      channelId: 0, // Tab栏默认选中状态
      userChannelList: [], // 用户的频道列表
      allChannelList: [], // 所有频道列表
      show: false, // 频道列表弹出层的显示/隐藏
      chanenScrollTObj: {} // 记录每个频道的滚动位置
    }
  },
  async created() {
    // 获取用户频道
    const res = await getUserChannelsListApi()
    this.userChannelList = res.data.data.channels
    // 获取所有的频道的列表
    const res2 = await getAllChannelListApi()
    this.allChannelList = res2.data.data.channels
  },
  components: {
    ArticleList,
    chanenlEdit
  },
  methods: {
    popupClickFn() {
      this.show = true
    },
    // 用户添加频道的事件处理函数
    async addChannelFn(channelObj) {
      // 向用户频道添加更多频道里的对象
      this.userChannelList = [...this.userChannelList, channelObj]
      // 把数据同步到后台 需要处理数据的格式
      // 把推荐频道剔除
      const newArr = this.userChannelList.filter(item => item.id !== 0)
      // 用map收集一份 数据处理发给后台
      const theNewArr = newArr.map((obj, index) => {
        const newBoj = { ...obj } // 拷贝一份就不会影响到原数据组
        delete newBoj.name
        newBoj.seq = index
        return newBoj // 让map方法把新对象收集起来形成一个数组
      })
      await updateChannelsApi(theNewArr)
    },
    // 删除频道的事件处理函数
    async deleteChannelFn(channelObj) {
      this.userChannelList = this.userChannelList.filter(item => item.id !== channelObj.id)
      // 调用删除的接口更新后台数据
      await deleteUserChannelApi(channelObj.id)
    },
    // 关闭按钮回调
    colseFn() {
      // 关闭频道列表弹出层
      this.show = false
      // 修改子组件中isEdit的状态
      this.$refs.editRef.isEdit = false
    },
    moveSearchFn() {
      this.$router.push('/search')
    },
    // 滚动条滚动的回调
    scrollFn() {
      // 保存当前页面的滚动距离
      this.$route.meta.scrollTop = document.documentElement.scrollTop
      // 同时保存当前频道的滚动距离
      this.chanenScrollTObj[this.channelId] = document.documentElement.scrollTop
    },
    // 频道改变的回调
    channelChangeFn() {
      // tab切换后,设置滚动条位置
      // tab切换时,整个组件内部,会把切走的容器设置为0,滚动条因为没有高度回到了顶部
      // 切回来的一瞬间，没有高度，滚动事件从底下上来也被触发了，所以才把数据设置为0
      // 等Dom更新完了再设置滚动条位置 因为切回来的一瞬间，高度为0，设置滚动位置也没用
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.chanenScrollTObj[this.channelId]
      })
    }
  },
  // 计算属性 (项目小难点 筛选数组算法)
  computed: {
    uncheckChannelList() {
      // 在allChannelList去除掉和userChannelList里的相同的对象
      // const newArr = this.allChannelList.filter(bigObj => {
      //   // 在userChannelList中找与allChannelList相同的 找到了返回索引 没找到返回-1
      //   const index = this.userChannelList.findIndex(smallObj => bigObj.id === smallObj.id)
      //   if (index > -1) {
      //     return false
      //   } else {
      //     return true
      //   }
      // })
      // return newArr
      // 极简写法
      return this.allChannelList.filter(bigObj => this.userChannelList.findIndex(smallObj => smallObj.id === bigObj.id) === -1)
    }
  },
  // 前提组件缓存,页面被激活时触发
  activated() {
    // 监听滚动条滚动事件
    window.addEventListener('scroll', this.scrollFn)

    // 切回来时立刻设置滚动条位置为路由meta中保存时的滚动条位置
    document.documentElement.scrollTop = this.$route.meta.scrollTop
  },
  deactivated() {
    // 切走时清除监听滚动条滚动事件
    window.removeEventListener('scroll', this.scrollFn)
  }
}
</script>

<style scoped lang="less">
.logo {
  width: 100px;
  height: 30px;
}
.van-nav-bar {
  background-color: #007bff;
}
.main {
  padding-top: 46px;
}
/deep/ .van-tabs__line {
  background-color: #007bff;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
  user-select: none;
}
// 设置频道列表弹出层的宽高为100%
.channenl-popup {
  width: 100vw;
  height: 100vh;
}
</style>
